<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>







<div id="app">
<!-- 
  <u>{{ list[0] }}</u>

  <p v-for="(item,i) in list"> 索引值:{{i}}, 显示: {{item}} </p>

<hr>
  <p style="display: inline-block; margin-left: 20px;" v-for="user in list2"> id编号:{{user.id}}, 名字:{{user.name}}  ----- </p>

  <p v-for=" (user,i) in list2"> id编号:{{user.id}}, 名字:{{user.name}} ,属于列表的第{{i+1}}个</p>

 -->

<hr>
  <li>v-for有三个值  (item, key, i),   key的作用是输出键值</li>
  <p v-for=" (val,key,i) in user"> item:{{user.id}}----{{user.name}} ,i值:{{i}},键名:{{key}}</p>


<hr>
  <p v-for="count in 3">这是  "count in 3"  的第{{ count }} 次循环,行内添加,不作用到data</p>


</div>









<br>
<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
    list:[1,2,3,4,5],

    list2:[
     { id:1, name:'aa'},
     { id:2, name:'bb'},
     { id:3, name:'cc'},
    ],

    user:{
      id:1,
      name:"jack",
      gender:'男'
    }

  },

  methods:{

  	


  }

})





</script>

	
</body>
</html>